<template>
  <div>
    <p class="p1">用户注册</p>
    <van-field
      v-model="user_name"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="user_pwd"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field
      readonly
      clickable
      name="picker"
      :value="date_value"
      label="出生日期"
      placeholder="点击选择年月日"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onDate"
        @cancel="showPicker = false"
      />
    </van-popup>

    <van-field
      readonly
      clickable
      name="area"
      :value="region_value"
      label="请选择地区"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom">
      <van-area :area-list="areaList" :columns-num="2" @confirm="onConfirm" @cancel="showArea = false" />
    </van-popup>
    <van-field name="uploader" label="头像上传" >
      <template #input>
        <van-uploader v-model="uploader" />
      </template>
    </van-field>
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" @click="onSubmit()">注册</van-button>
    </div>
  </div>
</template>
<script>
import http from '../api/index';
export default {
  data() {
    return {
      // 用户注册
      user_name: '',
      user_pwd: '',
      // 选择地区
      region_value: '',
      showArea: false,
      areaList: {
        province_list: {
          110000: '北京市',
          120000: '天津市',
          130000: '河北省',
          140000: '山西省',
          150000: '内蒙古自治区',
          210000: '辽宁省',
          220000: '吉林省',
          230000: '黑龙江省',
          310000: '上海市',
          320000: '江苏省',
          330000: '浙江省',
          340000: '安徽省',
          350000: '福建省',
          360000: '江西省',
          370000: '山东省',
          410000: '河南省',
          420000: '湖北省',
          430000: '湖南省',
          440000: '广东省',
          450000: '广西壮族自治区',
          460000: '海南省',
          500000: '重庆市',
          510000: '四川省',
          520000: '贵州省',
          530000: '云南省',
          540000: '西藏自治区',
          610000: '陕西省',
          620000: '甘肃省',
          630000: '青海省',
          640000: '宁夏回族自治区',
          650000: '新疆维吾尔自治区',
          710000: '台湾省',
          810000: '香港特别行政区',
          820000: '澳门特别行政区',
          900000: '海外'
        },
        city_list: {
          110100: '北京市',
          120100: '天津市',
          130100: '石家庄市',
          130200: '唐山市',
          130300: '秦皇岛市',
          130400: '邯郸市',
          130500: '邢台市',
          130600: '保定市',
          130700: '张家口市',
          130800: '承德市',
          130900: '沧州市',
          131000: '廊坊市',
          131100: '衡水市',
          140100: '太原市',
          140200: '大同市',
          140300: '阳泉市',
          140400: '长治市',
          140500: '晋城市',
          140600: '朔州市',
          140700: '晋中市',
          140800: '运城市',
          140900: '忻州市',
          141000: '临汾市',
          141100: '吕梁市',
          150100: '呼和浩特市',
          150200: '包头市',
          150300: '乌海市',
          150400: '赤峰市',
          150500: '通辽市',
          150600: '鄂尔多斯市',
          150700: '呼伦贝尔市',
          150800: '巴彦淖尔市',
          150900: '乌兰察布市',
          152200: '兴安盟',
          152500: '锡林郭勒盟',
          152900: '阿拉善盟',
          210100: '沈阳市',
          210200: '大连市',
          210300: '鞍山市',
          210400: '抚顺市',
          210500: '本溪市',
          210600: '丹东市',
          210700: '锦州市',
          210800: '营口市',
          210900: '阜新市',
          211000: '辽阳市',
          211100: '盘锦市',
          211200: '铁岭市',
          211300: '朝阳市',
          211400: '葫芦岛市',
          220100: '长春市',
          220200: '吉林市',
          220300: '四平市',
          220400: '辽源市',
          220500: '通化市',
          220600: '白山市',
          220700: '松原市',
          220800: '白城市',
          222400: '延边朝鲜族自治州',
          230100: '哈尔滨市',
          230200: '齐齐哈尔市',
          230300: '鸡西市',
          230400: '鹤岗市',
          230500: '双鸭山市',
          230600: '大庆市',
          230700: '伊春市',
          230800: '佳木斯市',
          230900: '七台河市',
          231000: '牡丹江市',
          231100: '黑河市',
          231200: '绥化市',
          232700: '大兴安岭地区',
          310100: '上海市',
          320100: '南京市',
          320200: '无锡市',
          320300: '徐州市',
          320400: '常州市',
          320500: '苏州市',
          320600: '南通市',
          320700: '连云港市',
          320800: '淮安市',
          320900: '盐城市',
          321000: '扬州市',
          321100: '镇江市',
          321200: '泰州市',
          321300: '宿迁市',
          330100: '杭州市',
          330200: '宁波市',
          330300: '温州市',
          330400: '嘉兴市',
          330500: '湖州市',
          330600: '绍兴市',
          330700: '金华市',
          330800: '衢州市',
          330900: '舟山市',
          331000: '台州市',
          331100: '丽水市',
          340100: '合肥市',
          340200: '芜湖市',
          340300: '蚌埠市',
          340400: '淮南市',
          340500: '马鞍山市',
          340600: '淮北市',
          340700: '铜陵市',
          340800: '安庆市',
          341000: '黄山市',
          341100: '滁州市',
          341200: '阜阳市',
          341300: '宿州市',
          341500: '六安市',
          341600: '亳州市',
          341700: '池州市',
          341800: '宣城市',
          350100: '福州市',
          350200: '厦门市',
          350300: '莆田市',
          350400: '三明市',
          350500: '泉州市',
          350600: '漳州市',
          350700: '南平市',
          350800: '龙岩市',
          350900: '宁德市',
          360100: '南昌市',
          360200: '景德镇市',
          360300: '萍乡市',
          360400: '九江市',
          360500: '新余市',
          360600: '鹰潭市',
          360700: '赣州市',
          360800: '吉安市',
          360900: '宜春市',
          361000: '抚州市',
          361100: '上饶市',
          370100: '济南市',
          370200: '青岛市',
          370300: '淄博市',
          370400: '枣庄市',
          370500: '东营市',
          370600: '烟台市',
          370700: '潍坊市',
          370800: '济宁市',
          370900: '泰安市',
          371000: '威海市',
          371100: '日照市',
          371300: '临沂市',
          371400: '德州市',
          371500: '聊城市',
          371600: '滨州市',
          371700: '菏泽市',
          410100: '郑州市',
          410200: '开封市',
          410300: '洛阳市',
          410400: '平顶山市',
          410500: '安阳市',
          410600: '鹤壁市',
          410700: '新乡市',
          410800: '焦作市',
          410900: '濮阳市',
          411000: '许昌市',
          411100: '漯河市',
          411200: '三门峡市',
          411300: '南阳市',
          411400: '商丘市',
          411500: '信阳市',
          411600: '周口市',
          411700: '驻马店市',
          419000: '省直辖县',
          420100: '武汉市',
          420200: '黄石市',
          420300: '十堰市',
          420500: '宜昌市',
          420600: '襄阳市',
          420700: '鄂州市',
          420800: '荆门市',
          420900: '孝感市',
          421000: '荆州市',
          421100: '黄冈市',
          421200: '咸宁市',
          421300: '随州市',
          422800: '恩施土家族苗族自治州',
          429000: '省直辖县',
          430100: '长沙市',
          430200: '株洲市',
          430300: '湘潭市',
          430400: '衡阳市',
          430500: '邵阳市',
          430600: '岳阳市',
          430700: '常德市',
          430800: '张家界市',
          430900: '益阳市',
          431000: '郴州市',
          431100: '永州市',
          431200: '怀化市',
          431300: '娄底市',
          433100: '湘西土家族苗族自治州',
          440100: '广州市',
          440200: '韶关市',
          440300: '深圳市',
          440400: '珠海市',
          440500: '汕头市',
          440600: '佛山市',
          440700: '江门市',
          440800: '湛江市',
          440900: '茂名市',
          441200: '肇庆市',
          441300: '惠州市',
          441400: '梅州市',
          441500: '汕尾市',
          441600: '河源市',
          441700: '阳江市',
          441800: '清远市',
          441900: '东莞市',
          442000: '中山市',
          445100: '潮州市',
          445200: '揭阳市',
          445300: '云浮市',
          450100: '南宁市',
          450200: '柳州市',
          450300: '桂林市',
          450400: '梧州市',
          450500: '北海市',
          450600: '防城港市',
          450700: '钦州市',
          450800: '贵港市',
          450900: '玉林市',
          451000: '百色市',
          451100: '贺州市',
          451200: '河池市',
          451300: '来宾市',
          451400: '崇左市',
          460100: '海口市',
          460200: '三亚市',
          460300: '三沙市',
          460400: '儋州市',
          469000: '省直辖县',
          500100: '重庆市',
          500200: '县',
          510100: '成都市',
          510300: '自贡市',
          510400: '攀枝花市',
          510500: '泸州市',
          510600: '德阳市',
          510700: '绵阳市',
          510800: '广元市',
          510900: '遂宁市',
          511000: '内江市',
          511100: '乐山市',
          511300: '南充市',
          511400: '眉山市',
          511500: '宜宾市',
          511600: '广安市',
          511700: '达州市',
          511800: '雅安市',
          511900: '巴中市',
          512000: '资阳市',
          513200: '阿坝藏族羌族自治州',
          513300: '甘孜藏族自治州',
          513400: '凉山彝族自治州',
          520100: '贵阳市',
          520200: '六盘水市',
          520300: '遵义市',
          520400: '安顺市',
          520500: '毕节市',
          520600: '铜仁市',
          522300: '黔西南布依族苗族自治州',
          522600: '黔东南苗族侗族自治州',
          522700: '黔南布依族苗族自治州',
          530100: '昆明市',
          530300: '曲靖市',
          530400: '玉溪市',
          530500: '保山市',
          530600: '昭通市',
          530700: '丽江市',
          530800: '普洱市',
          530900: '临沧市',
          532300: '楚雄彝族自治州',
          532500: '红河哈尼族彝族自治州',
          532600: '文山壮族苗族自治州',
          532800: '西双版纳傣族自治州',
          532900: '大理白族自治州',
          533100: '德宏傣族景颇族自治州',
          533300: '怒江傈僳族自治州',
          533400: '迪庆藏族自治州',
          540100: '拉萨市',
          540200: '日喀则市',
          540300: '昌都市',
          540400: '林芝市',
          540500: '山南市',
          540600: '那曲市',
          542500: '阿里地区',
          610100: '西安市',
          610200: '铜川市',
          610300: '宝鸡市',
          610400: '咸阳市',
          610500: '渭南市',
          610600: '延安市',
          610700: '汉中市',
          610800: '榆林市',
          610900: '安康市',
          611000: '商洛市',
          620100: '兰州市',
          620200: '嘉峪关市',
          620300: '金昌市',
          620400: '白银市',
          620500: '天水市',
          620600: '武威市',
          620700: '张掖市',
          620800: '平凉市',
          620900: '酒泉市',
          621000: '庆阳市',
          621100: '定西市',
          621200: '陇南市',
          622900: '临夏回族自治州',
          623000: '甘南藏族自治州',
          630100: '西宁市',
          630200: '海东市',
          632200: '海北藏族自治州',
          632300: '黄南藏族自治州',
          632500: '海南藏族自治州',
          632600: '果洛藏族自治州',
          632700: '玉树藏族自治州',
          632800: '海西蒙古族藏族自治州',
          640100: '银川市',
          640200: '石嘴山市',
          640300: '吴忠市',
          640400: '固原市',
          640500: '中卫市',
          650100: '乌鲁木齐市',
          650200: '克拉玛依市',
          650400: '吐鲁番市',
          650500: '哈密市',
          652300: '昌吉回族自治州',
          652700: '博尔塔拉蒙古自治州',
          652800: '巴音郭楞蒙古自治州',
          652900: '阿克苏地区',
          653000: '克孜勒苏柯尔克孜自治州',
          653100: '喀什地区',
          653200: '和田地区',
          654000: '伊犁哈萨克自治州',
          654200: '塔城地区',
          654300: '阿勒泰地区',
          659000: '自治区直辖县级行政区划',
          710100: '台北市',
          710200: '高雄市',
          710300: '台南市',
          710400: '台中市',
          710500: '金门县',
          710600: '南投县',
          710700: '基隆市',
          710800: '新竹市',
          710900: '嘉义市',
          711100: '新北市',
          711200: '宜兰县',
          711300: '新竹县',
          711400: '桃园县',
          711500: '苗栗县',
          711700: '彰化县',
          711900: '嘉义县',
          712100: '云林县',
          712400: '屏东县',
          712500: '台东县',
          712600: '花莲县',
          712700: '澎湖县',
          712800: '连江县',
          810100: '香港岛',
          810200: '九龙',
          810300: '新界',
          820100: '澳门半岛',
          820200: '离岛',
          900400: '阿富汗',
          900800: '阿尔巴尼亚',
          901000: '南极洲',
          901200: '阿尔及利亚',
          901600: '美属萨摩亚',
          902000: '安道尔',
          902400: '安哥拉',
          902800: '安提瓜和巴布达',
          903100: '阿塞拜疆',
          903200: '阿根廷',
          903600: '澳大利亚',
          904000: '奥地利',
          904400: '巴哈马',
          904800: '巴林',
          905000: '孟加拉',
          905100: '亚美尼亚',
          905200: '巴巴多斯',
          905600: '比利时',
          906000: '百慕大',
          906400: '不丹',
          906800: '玻利维亚',
          907000: '波黑',
          907200: '博茨瓦纳',
          907400: '布韦岛',
          907600: '巴西',
          908400: '伯利兹',
          908600: '英属印度洋领地',
          909000: '所罗门群岛',
          909200: '英属维尔京群岛',
          909600: '文莱',
          910000: '保加利亚',
          910400: '缅甸',
          910800: '布隆迪',
          911200: '白俄罗斯',
          911600: '柬埔寨',
          912000: '喀麦隆',
          912400: '加拿大',
          913200: '佛得角',
          913600: '开曼群岛',
          914000: '中非',
          914400: '斯里兰卡',
          914800: '乍得',
          915200: '智利',
          916200: '圣诞岛',
          916600: '科科斯群岛',
          917000: '哥伦比亚',
          917400: '科摩罗',
          917500: '马约特',
          917800: '刚果（布）',
          918000: '刚果（金）',
          918400: '库克群岛',
          918800: '哥斯达黎加',
          919100: '克罗地亚',
          919200: '古巴',
          919600: '塞浦路斯',
          920300: '捷克',
          920400: '贝宁',
          920800: '丹麦',
          921200: '多米尼克',
          921400: '多米尼加',
          921800: '厄瓜多尔',
          922200: '萨尔瓦多',
          922600: '赤道几内亚',
          923100: '埃塞俄比亚',
          923200: '厄立特里亚',
          923300: '爱沙尼亚',
          923400: '法罗群岛',
          923800: '马尔维纳斯群岛（ 福克兰）',
          923900: '南乔治亚岛和南桑威奇群岛',
          924200: '斐济群岛',
          924600: '芬兰',
          924800: '奥兰群岛',
          925000: '法国',
          925400: '法属圭亚那',
          925800: '法属波利尼西亚',
          926000: '法属南部领地',
          926200: '吉布提',
          926600: '加蓬',
          926800: '格鲁吉亚',
          927000: '冈比亚',
          927500: '巴勒斯坦',
          927600: '德国',
          928800: '加纳',
          929200: '直布罗陀',
          929600: '基里巴斯',
          930000: '希腊',
          930400: '格陵兰',
          930800: '格林纳达',
          931200: '瓜德罗普',
          931600: '关岛',
          932000: '危地马拉',
          932400: '几内亚',
          932800: '圭亚那',
          933200: '海地',
          933400: '赫德岛和麦克唐纳群岛',
          933600: '梵蒂冈',
          934000: '洪都拉斯',
          934800: '匈牙利',
          935200: '冰岛',
          935600: '印度',
          936000: '印尼',
          936400: '伊朗',
          936800: '伊拉克',
          937200: '爱尔兰',
          937600: '以色列',
          938000: '意大利',
          938400: '科特迪瓦',
          938800: '牙买加',
          939200: '日本',
          939800: '哈萨克斯坦',
          940000: '约旦',
          940400: '肯尼亚',
          940800: '朝鲜 北朝鲜',
          941000: '韩国',
          941400: '科威特',
          941700: '吉尔吉斯斯坦',
          941800: '老挝',
          942200: '黎巴嫩',
          942600: '莱索托',
          942800: '拉脱维亚',
          943000: '利比里亚',
          943400: '利比亚',
          943800: '列支敦士登',
          944000: '立陶宛',
          944200: '卢森堡',
          945000: '马达加斯加',
          945400: '马拉维',
          945800: '马来西亚',
          946200: '马尔代夫',
          946600: '马里',
          947000: '马耳他',
          947400: '马提尼克',
          947800: '毛里塔尼亚',
          948000: '毛里求斯',
          948400: '墨西哥',
          949200: '摩纳哥',
          949600: '蒙古国',
          949800: '摩尔多瓦',
          949900: '黑山',
          950000: '蒙塞拉特岛',
          950400: '摩洛哥',
          950800: '莫桑比克',
          951200: '阿曼',
          951600: '纳米比亚',
          952000: '瑙鲁',
          952400: '尼泊尔',
          952800: '荷兰',
          953300: '阿鲁巴',
          953500: '荷兰加勒比区',
          954000: '新喀里多尼亚',
          954800: '瓦努阿图',
          955400: '新西兰',
          955800: '尼加拉瓜',
          956200: '尼日尔',
          956600: '尼日利亚',
          957000: '纽埃',
          957400: '诺福克岛',
          957800: '挪威',
          958000: '北马里亚纳群岛',
          958100: '美国本土外小岛屿',
          958300: '密克罗尼西亚联邦',
          958400: '马绍尔群岛',
          958500: '帕劳',
          958600: '巴基斯坦',
          959100: '巴拿马',
          959800: '巴布亚新几内亚',
          960000: '巴拉圭',
          960400: '秘鲁',
          960800: '菲律宾',
          961200: '皮特凯恩群岛',
          961600: '波兰',
          962000: '葡萄牙',
          962400: '几内亚比绍',
          962600: '东帝汶',
          963000: '波多黎各',
          963400: '卡塔尔',
          963800: '留尼汪',
          964200: '罗马尼亚',
          964300: '俄罗斯',
          964600: '卢旺达',
          965200: '圣巴泰勒米岛',
          965400: '圣赫勒拿',
          965900: '圣基茨和尼维斯',
          966000: '安圭拉',
          966200: '圣卢西亚',
          966300: '法属圣马丁',
          966600: '圣皮埃尔和密克隆',
          967000: '圣文森特和格林纳丁斯',
          967400: '圣马力诺',
          967800: '圣多美和普林西比',
          968200: '沙特阿拉伯',
          968600: '塞内加尔',
          968800: '塞尔维亚',
          969000: '塞舌尔',
          969400: '塞拉利昂',
          970200: '新加坡',
          970300: '斯洛伐克',
          970400: '越南',
          970500: '斯洛文尼亚',
          970600: '索马里',
          971000: '南非',
          971600: '津巴布韦',
          972400: '西班牙',
          972800: '南苏丹',
          972900: '苏丹',
          973200: '西撒哈拉',
          974000: '苏里南',
          974400: '斯瓦尔巴群岛和 扬马延岛',
          974800: '斯威士兰',
          975200: '瑞典',
          975600: '瑞士',
          976000: '叙利亚',
          976200: '塔吉克斯坦',
          976400: '泰国',
          976800: '多哥',
          977200: '托克劳',
          977600: '汤加',
          978000: '特立尼达和多巴哥',
          978400: '阿联酋',
          978800: '突尼斯',
          979200: '土耳其',
          979500: '土库曼斯坦',
          979600: '特克斯和凯科斯群岛',
          979800: '图瓦卢',
          980000: '乌干达',
          980400: '乌克兰',
          980700: '马其顿',
          981800: '埃及',
          982600: '英国',
          983100: '根西岛',
          983200: '泽西岛',
          983300: '马恩岛',
          983400: '坦桑尼亚',
          984000: '美国',
          985000: '美属维尔京群岛',
          985400: '布基纳法索',
          985800: '乌拉圭',
          986000: '乌兹别克斯坦',
          986200: '委内瑞拉',
          987600: '瓦利斯和富图纳',
          988200: '萨摩亚',
          988700: '也门',
          989400: '赞比亚'
        }
      }, // 数据格式见 Area 组件文档
      //选择出生日期
      date_value: '',
      currentDate: new Date(),
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2025, 10, 1),
      showPicker: false,
      //头像上传
      uploader: []
    };
  },
  methods: {
    // 注册
    onSubmit() {
        console.log('user_name==', this.user_name);
        console.log('user_pwd==', this.user_pwd);
        console.log('user_birthday==', this.date_value);
      http.userRegister({

        user_name:this.user_name,
        user_pwd:this.user_pwd,
        user_birthday:this.date_value,
        region:{
          region_id:1
        }
        
        // user_image_road:
      }).then(r =>{
        console.log(region_id);
        console.log('login==', r);


      });
    },
    //选择地区
    onConfirm(values) {
      this.region_value = values
        .filter(item => !!item)
        .map(item => item.name)
        .join('/');
      this.showArea = false;
    },
    onDate(time) {
      this.date_value =`${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`;
      this.showPicker = false;
    },
  
  }
};
</script>
<style scoped>
.p1 {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
}
</style>